<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { ResourceItem, CatalogueItem, OptionTypeItem } from '@/types/home'
import type { checkItem } from '@/types/home'
import { getCatelogueAPI } from '@/services/home'
const style = ref<any>('background-color: red;')
const resource_list = ref<ResourceItem[]>([])
const publish = ref<string>('')
const scrollTop = 0
// 选择框列表
const dropdownListOption = ref<OptionTypeItem[]>([
  { text: '人教版', value: '人教版', disable: false },
  { text: '北师大', value: '人教版', disable: false },
  { text: '浙教版', value: '人教版', disable: false },
])
const state = reactive({
  type_index: 0,
  grade_index: 0,
  subject_index: 0,
  type_cn: 0,
  page: 1,
  size: 10,
  total: 0,
})
const catalogueList = ref<CatalogueItem[]>([
  {
    name: '幼小衔接',
    children: [
      {
        name: '语文',
        children: [
          { name: '拼音资料', children: [] },
          { name: '笔画练习', children: [] },
          { name: '识字描红', children: [] },
          { name: '古诗背诵', children: [] },
        ],
      },
      {
        name: '数学',
        children: [{ name: '口算练习', children: [] }],
      },
    ],
  },
])

onLoad(() => {
  console.log('父组件页面加载')
  getCatelogue()
  // for (let i = 0; i <= 20; i++) {
  //   styles[`style${i}`].value = 'color: while;background-color: white'
  // }
})
// 三级目录
const getCatelogue = async () => {
  const res = await getCatelogueAPI()
  catalogueList.value = res.results
  console.log('catalogueList:', res.results)
}
// 点击年级, 修改样式，背景颜色改为白色
const handleTapGrade = (index: number) => {
  state.grade_index = index
  changeBgColor(index)
}
// 随机选取图标
const icon_set = ['gift-filled', 'gift', 'folder-add', 'folder-add-filled', 'fire', 'fire-filled']
const select_icon = (index: number) => {
  return icon_set[index % 6]
}
// 点击资源类型后，跳转到二级目录
const onClickType = (type_index: number, subject_index: number) => {
  console.log('点击了资源类型：', type_index)
  const grade = catalogueList.value[state.grade_index]
  const grade_name = grade.name
  const subject = grade.children[subject_index]
  const subject_name = subject.name
  const type_name = subject.children[type_index].name
  uni.navigateTo({
    url: `/pages/category/second?grade=${grade_name}&subject=${subject_name}&type=${type_name}`,
  })
}
// 上次点击的对象
const style_last: any = ref(null)
// 创建ref各自的style
const styles: any = {}
// 创建对象 { Ref1: ref(null), Ref2: ref(null), ... }
const refs: any = {}
for (let i = 0; i <= 30; i++) {
  refs[`ref${i}`] = ref(null)
  styles[`style${i}`] = ref<any>('color: #f3f6f4;background-color: #f3f6f4;')
}
// 改变标签的背景颜色
const changeBgColor = (index: number) => {
  // console.log('styles:', style_last.value)
  if (style_last.value) {
    styles[style_last.value].value =
      'color: #f3f6f4;background-color: #f3f6f4; transition: background-color 0.5s ease'
  }
  styles[`style${index}`].value = 'color: #ffffff;background-color: #ffffff'
  style_last.value = `style${index}`
}
</script>

<template>
  <view class="container">
    <view class="search">
      <text class="icon-search">搜索</text>
      <text class="icon-scan"></text>
    </view>
    <view class="body">
      <scroll-view scroll-y="true" class="left" :scroll-top="scrollTop">
        <view
          class="left-item"
          v-for="(item, index) in catalogueList"
          :key="index"
          @click="handleTapGrade(index)"
          :style="styles[`style${index}`]"
          :ref="refs[`ref${index}`]"
        >
          <text class="text_left">{{ item.name }}</text>
          <view class="horizontal-divider"></view>
        </view>
      </scroll-view>
      <view class="right">
        <scroll-view scroll-y="true" :scroll-top="scrollTop">
          <view
            v-for="(subject_item, subject_index) in catalogueList[state.grade_index].children"
            :key="subject_index"
          >
            <text class="text_subject">{{ subject_item.name }}</text>
            <view class="resource_type">
              <view
                v-for="(type_item, index) in subject_item.children"
                :key="index"
                class="type_item"
                @click="onClickType(index, subject_index)"
              >
                <uni-icons :type="select_icon(subject_index)" size="30"></uni-icons>
                <text class="text_type">{{ type_item.name }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
  background-color: #dadadce7;
}
.base-line {
  width: 300rpx; /* 横线宽度，可改为固定值如 300rpx */
  height: 1px; /* 横线粗细 */
  background-color: #ce1b1b; /* 横线颜色 */
  margin: 3rpx 0; /* 上下间距 */
  border-width: 2rpx;
  border-color: #596c63;
}
.body {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
}
.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f3f6f4;
  margin: 5rpx;
  height: 1000rpx;
}
.right {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 73%;
}
.text_left {
  font-size: 30rpx;
  color: #596c63;
  margin: 3rpx;
  padding: 2rpx;
}
.text_subject {
  font-size: 33rpx;
  color: #f0760a;
  margin: 3rpx;
}
.text_type {
  font-size: 28rpx;
  color: #596c63;
  margin: 3rpx;
}
.type_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 3rpx;
}
.resource_type {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row wrap;
}
.horizontal-divider {
  height: 2rpx; /* 分割线高度 */
  background-color: #e5e5e5; /* 线的颜色 */
  margin: 20rpx 0; /* 上下间距 */
}

.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10rpx 0 26rpx;
  height: 64rpx;
  margin: 16rpx 20rpx;
  color: #3f3d3d;
  font-size: 28rpx;
  border-radius: 32rpx;
  background-color: #f3f6f4;
}

.icon-search {
  &::before {
    margin-right: 10rpx;
  }
}

.icon-scan {
  font-size: 30rpx;
  padding: 15rpx;
}
</style>
